<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<!-- 本页面css -->

		<link rel="stylesheet" href="css/out.css" />
		
		<link rel="stylesheet" href="css/outForm.css" />
	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span @click="handleClickGotoHomePage" class="nav-item">总览</span>
					<span class="nav-item noClick">域名</span>
					<span @click="handleClickGotoOutList" class="nav-item">域名转出列表</span>
					<span class="nav-item">域名转出</span>
				</div>
				<div class="form-wrapper">
					<div class="from-title-wrapper">
						<span @click="returnCurrentPage" class="from-title">
							<i class="icon el-icon-back"></i>
							域名转出</span>
					</div>

					<ul class="notice-wrapper mb-20">
						<li class="notice-item">域名注册 60 天内，域名到期前 30 天内，域名最近一次成功转移 60 天内，无法转移。</li>
						<li class="notice-item">域名过期后完成续费或域名赎回未超过 45 天，无法转移。</li>
						<li class="notice-item">建议在域名最近一次续费的 60 天后办理域名转出，避免您的域名注册年限可能在转出到其他服务商后不能延长一年，从而损失一年的续费费用。</li>
					</ul>

					<div v-if="!isGenerateCode" class="sumbitForm-wrapper">
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="136px" class="demo-ruleForm">
							<el-form-item label="域名" :prop="initruleForm.name === undefined ? 'name' : 'noRuler'">
								<el-input style="width: 320px" placeholder="请输入域名" :disabled="initruleForm.name === undefined ? false :  true"
								 v-model="ruleForm.name" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="转入注册商" prop="registerBussinessCode">
								<el-input style="width: 320px" placeholder="请输入注册商码" v-model="ruleForm.registerBussinessCode" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="手机号:" class="phoneNumber" prop="phoneNum">
								<i class="linear"></i>
								<el-input clearable maxLength="20" style="width: 320px;" type="text" class="card-box-input" placeholder="请输入手机号码"
								 v-model.number="ruleForm.phoneNum">
									<el-select v-model="ruleForm.areaActiveId" class="inputText" slot="prefix">
										<el-option v-for="(item,index) in ruleForm.areaGroup" :key="item.id" :label="item.label" :value="item.id"></el-option>
									</el-select>
								</el-input>
							</el-form-item>
							<el-form-item prop="phoneVerificationCode" label="手机验证码:">
								<el-input maxLength="6" style="width: 192px;" v-model="ruleForm.phoneVerificationCode"></el-input>
								<div :class="{'noClick': !phoneCanSendverificationCode}" @click="handleClickSendverificationCode" class="yzButton verificationCode ml-10">
									{{handleVerificationCodeText()}}
								</div>
							</el-form-item>
							<el-form-item label="转出原因" prop="outReason">
								<el-input maxlength="200" show-word-limit :autosize="{ minRows: 4}" type="textarea" style="width: 320px"
								 placeholder="请填写转出原因" v-model="ruleForm.outReason" autocomplete="off"></el-input>

							</el-form-item>
						</el-form>

						<div @click="submitForm('ruleForm')" class="yzButton submit  deep">提交</div>
					</div>
					<div v-if="isGenerateCode" class="transfercode-wrapper">
						<span class="title">域名转移码</span>
						<span class="val transfercode">{{transfercode}}</span>
						<span data-clipboard-action="copy" data-clipboard-target=".transfercode" class="copybutton">复制</span>
					</div>
				</div>
			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- 引入复制的文件 -->
		<script type="application/javascript" src="../js/clipboard.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				data: function() {
					let that = this

					// 复制的js
					var clipboard = new Clipboard('.copybutton');

					clipboard.on('success', function(e) {
						that.$message.success('复制转移码成功！')
					});

					clipboard.on('error', function(e) {
						that.$message.error('复制转移码失败！')
					});




					// 校验修改手机验证码
					var validateEidtphoneCode = function(rule, value, callback) {

						if (that.phoneCanSendverificationCode === true) {
							callback(new Error('请点击发送手机验证码！'));
						}
						console.log(value, that.phonerightVerificationCode)
						if (value !== that.phonerightVerificationCode) {
							callback(new Error('验证码错误！'));
						} else {
							callback()
						}
					}


					return {
						//  新增
						transfercode: undefined, //'123acd4s5dc4d5s44c21sFff51zf2f1s2d2e2d3fg1d5f2g5', // 转移码
						isGenerateCode: false, // 是否生成了域名转移码
						phoneCanSendverificationCode: true, // 修改手机号  是否可以发送验证码
						phoneWaitVerificationCodeNum: 60, // 修改手机号等待验证码倒计时
						phoneWaitVerificationCodeTimer: null, // 修改手机号等待验证码 的计时器
						phonerightVerificationCode: undefined, //  修改手机 正确的验证码
						initruleForm: { // 原始表单

						},
						ruleForm: {
							name: undefined, // 域名
							registerBussinessCode: undefined, // 转入注册商码
							phoneNum: undefined, // 手机号码
							areaGroup: [{
								id: 1,
								label: '中国+86'
							}, {
								id: 2,
								label: '美国+123'
							}, {
								id: 3,
								label: '韩国+124'
							}],
							areaActiveId: 1, // 默认选择中国  这里id根据实际来
							outReason: undefined
						},
						rules: {
							name: [{
								required: true,
								message: '请输入域名',
								trigger: 'blur'
							}],
							registerBussinessCode: [{
								required: true,
								message: '请输入注册商码',
								trigger: 'blur'
							}, ],
							phoneNum: [{
								required: true,
								message: '请输入手机号',
								trigger: 'blur'
							}, {
								validator: validatephone,
								trigger: 'blur'
							}],
							phoneVerificationCode: [{
								required: true,
								message: '请输入获取的验证码',
								trigger: 'blur'
							}, {
								validator: validateEidtphoneCode,
								trigger: 'blur'
							}],
							// outReason: [{
							// 	required: true,
							// 	message: '请输入转出原因',
							// 	trigger: 'blur'
							// }]
						},
					}
				},

				methods: {
					// 提交表单
					submitForm: _throttle(function(formName) {
						let that = this
						this.$refs[formName].validate(function(valid) {
							if (valid) {
								that.$message.success('提交表单信息成功')

								// 模拟后台生成转移码
								that.transfercode = '123acd4s5dc4d5s44c21sFff51zf2f1s2d2e2d3fg1d5f2g5'
								that.isGenerateCode = true
							} else {
								return false;
							}
						});
					}),


					// 返回到上一页的方法
					returnCurrentPage: _throttle(function() {
						// 调用公用方法
						returnCurrentPage()
					}),


					// 跳转到域名转出列表页面
					handleClickGotoOutList: _throttle(function() {
						window.open('out.html', '_self')
					}),



					// 跳转到首页的方法
					handleClickGotoHomePage: function() {
						gotohomePage()
					},

					// 发送验证码
					handleClickSendverificationCode: _throttle(function(key) {
						if (this.phoneCanSendverificationCode === false) {
							return
						}
						this.phoneCanSendverificationCode = false
						// 模拟后台获取手机验证码
						this.phonerightVerificationCode = '12345'
						let that = this
						this.phoneWaitVerificationCodeTimer = setInterval(function() {
							that.phoneWaitVerificationCodeNum--
							if (that.phoneWaitVerificationCodeNum === 0 || that.phoneWaitVerificationCodeNum < 0) {
								// 初始化 修改手机的验证码
								that.phonerightVerificationCode = undefined
								clearTimeout(that.phoneWaitVerificationCodeTimer)
								that.phoneCanSendverificationCode = true
								that.phoneWaitVerificationCodeNum = 60

							}
						}, 1000)

					}),
					// 处理发送验证码的文案
					handleVerificationCodeText: function() {
						if (this.phoneCanSendverificationCode === true) {
							return '发送验证码'
						} else {

							return '已发送(' + this.phoneWaitVerificationCodeNum + 's)'
						}
					},

				},
				mounted: function() {
					// 后台应该通过域名转移码是否生成 来决定页面的显示  即 控制 isGenerateCode 的值

					this.initruleForm = deepCopy(this.ruleForm)
				}

			})
		</script>
	</body>
</html>
